<template>
	<view>
		<loadstatusVue :status="data.loadStatus">
			<view class="transfer">
				<view class="items" v-for="(item, index) in data.list" :key="index">
					<view class="items_top flex_jc_sb">
						<view class="items_l flex">
							<image v-if="item.user.img" :src="item.user.img" mode="aspectFill"></image>
							<image v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode="aspectFill"></image>
							<view class="">
								<view class="flex">
									<view class="t1">{{ item.user.name }}</view>
									<view class="t2">稻友 {{ item.user.id }}</view>
								</view>
								<view class="t3">申请时间：{{ item.createTime }}</view>
							</view>
						</view>
						<view class="btn" @click="handleReview(item)">审核</view>
					</view>
					<view class="item_b">
						<view class="">分社长ID：{{ item.groupUserId }}</view>
						<view class="" style="margin-top: 15rpx">分社长昵称：{{ item.groupUserName }}</view>
					</view>
				</view>
			</view>
		</loadstatusVue>
		<!-- 审核弹窗 -->
		<uni-popup ref="popupReview" type="center" >
			<view class="globalPopup">
				<uni-icons @click="close" type="closeempty" size="20" class="close" color="#AEAEAE"></uni-icons>
				<view class="title">转会审核</view>
				<view class="shenhe">
					<view class="tit_right">
						<radio-group @change="radioChange">
							<label class="radio" style="color: #000">
								<radio style="transform: scale(0.7)" color="#B19561" value="已通过" />
								通过
							</label>
							<label class="radio" style="color: #000; margin-left: 50rpx">
								<radio style="transform: scale(0.7)" color="#B19561" value="已驳回" />
								驳回
							</label>
						</radio-group>
					</view>
					<view class="popup_textarea">
						<textarea v-model="params.verifyDesc" placeholder="请输入说明" placeholder-class="input_text" maxlength="180" confirm-type="done"></textarea>
					</view>
				</view>
				<view class="btns flex_jc_sb">
					<view class="bt b1" @click="close">取消</view>
					<view class="bt b2" @click="handleConfirm">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import { getApplyList, changeVerify } from '@/api/branch/transfer.js';
import { toast, showConfirm } from '@/utils/common.js';
const data = reactive({
	list: [],
	total: 0,
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		pageNum: 1,
		pageSize: 10
	}
});
// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
			data.total = res.total;
		} else {
			data.list = res.rows || [];
			data.total = res.total;
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};
// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(300);
		}
		const res = await getApplyList(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(300);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};
const loadMore = () => {
  if (data.isLoading || !data.hasMore) {
    return false;
  }
  
  data.queryParams.pageNum++;
  getList(true); // 传递 true 表示是加载更多
  
  return true;
};
defineExpose({
	loadMore
});
onMounted(() => {
	getList();
});

const popupReview = ref(null);
const close = () => {
	popupReview.value.close();
};
const handleReview = (item) => {
	params.id = item.id;
	popupReview.value.open();
};

const params = reactive({
	id: 0, //
	verifyStatus: '', // 已通过、已驳回
	verifyDesc: '' // 审核说明
});
const radioChange = (e) => {
	params.verifyStatus = e.detail.value;
};
const handleConfirm = () => {
	if(params.verifyStatus == '已驳回'){
		if(params.verifyDesc == ''){
			toast('请输入驳回原因')
			return
		}
	}
	changeVerify(params).then(res=>{
		if(res.code == 200){
			toast('已审核')
			close()
			getList();
		}
	})
};
</script>
<style lang="scss" scoped>
.transfer {
	.items {
		width: 710rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 0rpx auto 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		.items_top {
			.items_l {
				image {
					width: 72rpx;
					height: 72rpx;
					border-radius: 40rpx;
					margin-right: 18rpx;
				}
				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #1b1b1b;
				}
				.t2 {
					display: inline-block;
					height: 32rpx;
					background: rgba(216, 198, 167, 0.5);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1px solid #75613e;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #75613e;
					line-height: 32rpx;
					text-align: center;
					margin-left: 15rpx;
					padding: 0rpx 15rpx;
				}
				.t3 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #aeaeac;
					margin-top: 12rpx;
				}
			}
			.btn {
				width: 100rpx;
				height: 44rpx;
				background: #d8c6a7;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #75613e;
				line-height: 44rpx;
				text-align: center;
			}
		}
		.item_b {
			width: 670rpx;
			height: 120rpx;
			background: #f7f7f7;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #979797;
		}
	}
}

.globalPopup {
	.shenhe {
		.tit_right {
			margin: 40rpx auto;
			font-size: 28rpx;
		}
		textarea {
			width: 100%;
			height: 160rpx;
			border: 1px solid #e5e5e5;
			border-radius: 4px;
			font-family: PingFang SC, PingFang SC;
			font-size: 28rpx;
			color: #000;
			padding: 10rpx;
			box-sizing: border-box;
			margin: 0rpx auto 30rpx;
		}
	}
}
</style>
